<template>
  <div>
		<el-space>
			<el-input v-model="roomNo" placeholder="请输入要查询的护理名称"></el-input>
			<el-button type="primary" @click="search">查询</el-button>
		</el-space>
		
		<el-table :data="tableData.records">
			<el-table-column label="序号">
				<template #default="scope">{{scope.$index + 1}}</template>
			</el-table-column>
			<el-table-column label="客户姓名" prop="customer.name"></el-table-column>
			<el-table-column label="生日">
				<template #default="scope">
					{{getAge(scope.row.customer.birthday)}}
				</template>
			</el-table-column>
			<el-table-column label="性别">
				<template #default="scope">
					{{scope.row.customer.sex === 0 ? '女' : '男'}}
				</template>
			</el-table-column>
			<el-table-column label="房间号" prop="customer.roomName"></el-table-column>
			<el-table-column label="创号" prop="customer.bedNo"></el-table-column>
			<el-table-column label="联系电话" prop="customer.contactTel" show-overflow-tooltip></el-table-column>
			<el-table-column label="护理级别" prop="nurselevel.name"></el-table-column>
			
			<el-table-column label="操作" width="140">
				<template #default="scope">
					<el-button v-if="scope.row.levelId === null" type="success" size="small" @click="update(scope.row.custormerId)">设置护理级别</el-button>
					<el-button v-else type="danger" size="small" @click="del(scope.row.id)">移除护理级别</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			background
			v-model:current-page="params.pageNo"
			:page-count="tableData.pages"
			@change="getTable"></el-pagination>
		<el-dialog
			v-model="editDialog.show"
			:title="editDialog.title"
			width="1200px"
			:close-on-click-modal="false">
			<Edit v-model:show="editDialog.show" :urls="request_url" :customerId="editDialog.id" v-if="editDialog.show" />
		</el-dialog>
  </div>
</template>
<script setup>
import { get, post } from '@/axios'
import { reactive, ref } from 'vue'
import Edit from './edit'
import { ElMessageBox } from 'element-plus'
import { dayjs } from 'element-plus'

const modelUrl = '/customernurseitem'
const request_url = {
	list: modelUrl + '/list',
	del: modelUrl + '/delete',
	add: modelUrl + '/add'
}
const tableData = ref([])
const roomNo = ref('')
const editDialog =reactive({
	show: false,
	title: '',
	id: null
})
const params = reactive({
	pageNo: 1,
	pageSize: 9,
	roomNo: ''
})
function getTable () {
	get(request_url.list, params, content => {
		console.dir(content)
		tableData.value =content
	})
}
function search () {
	params.pageNo = 1
	params.roomNo = roomNo.value
	getTable()
}
function update(id) {
	editDialog.id = id
	editDialog.title = '客户护理设置'
	editDialog.show = true
}
function del(id) {
	ElMessageBox.confirm('确定要删除该护理项目吗？', '删除警告', {
		type: 'warning',
		confirmButtonText: '确定',
		cancelButtonText: '取消'
	}).then(() => {
		post(request_url.del, { id }, content => {
			getTable()
		})
	}).catch(() => {})
}
function getAge(birthday) {
	return dayjs(new Date()).diff(birthday, 'year')
}
getTable()
</script>

<style scoped lang="scss">
.el-pagination, .el-table {
	margin-top: 10px;
}
</style>